<template>
  <div class="right ml-5">
    <!-- 异常数据 -->
    <div class="left_top flex justify-between">
      <div
        v-for="(item, index) in imgList"
        :key="index"
        :class="['left_top_item ', 'flex', 'items-center']"
        :style="[
          {
            backgroundImage:
              index == popoverIdx
                ? `url(${getImageUrl(styleOptine[popoverIdx][0])})`
                : `url(${getImageUrl('lsd_top_left.png')})`
          }
        ]"
        @click="handleBg(item, index)"
      >
        <img :src="getImageUrl(item.url)" alt="" class="ml-1.5 w-11 h-11"/>
        <div class="ml-3">
          <p class="text-xl mt-2 font-semibold text-white">{{ item.value }}</p>
          <p class="text-xs">{{ item.text }}</p>
        </div>
      </div>
      <!-- 弹出窗 -->
      <div class="popover" v-if="popoverIdx != 5">
        <div class="popover_item flex items-center">
          <div class="flex items-center">
            <svg aria-hidden="true" class="w-6 h-6 ml-2">
              <use :xlink:href="`#icon-${styleOptine[popoverIdx][1]}`"/>
            </svg>
            <span class="text-white">{{ styleOptine[popoverIdx][2] }}</span>
          </div>
          <div class="flex items-center ml-52">
            <img class="popover_zs" :src="getImageUrl(styleOptine[popoverIdx][3])" alt=""/>
            <svg aria-hidden="true" class="w-3 h-3 ml-4 cursor-pointer" @click="popoverIdx = 5">
              <use :xlink:href="`#icon-${styleOptine[popoverIdx][4]}`"/>
            </svg>
          </div>
        </div>
        <!-- 动画 -->
        <Decoration4 :reverse="true" style="width: 100%; height: 7px"/>
        <!-- 表格 -->
        <div class="tab mt-2">
          <el-table
            :data="
              popoverIdx == 0
                ? heartWarn
                : popoverIdx == 1
                ? spO2Warn
                : popoverIdx == 2
                ? breathWarn
                : []
            "
            style="width: 100%"
            :header-row-style="rowClass"
            :border="false"
            :max-height="490"
            @row-click="Rowclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column
              prop="patientName"
              label="预警事由"
              width="150"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <span style="color: #f53f3f">{{ row.warnContent }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="patientName" label="姓名" width="80"/>
            <el-table-column prop="bedNo" label="床位号" width="80"/>
            <el-table-column prop="deptName" label="科室" width="100"/>
            <el-table-column prop="createTime" label="预警时间" :show-overflow-tooltip="true"/>
          </el-table>
        </div>
        <!-- btn -->
        <div class="btn">
          <span
            class="btn_item cursor-pointer"
            :style="{ background: styleOptine[popoverIdx][5] }"
            @click="handleWarning(1)"
          >立即处理</span
          >
          <span class="btn_item cursor-pointer" @click="handleWarning(2)">稍后处理</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, toRefs, reactive, ref} from 'vue'
import {getImageUrl} from '@/utils'
import {getPat, getPatSign, getWarn, handleWarn} from '@/api/lsd'
import {useLsdStore} from '@/store/modules/lsd'
import {ElMessage} from 'element-plus'

const useLsd = useLsdStore()

const scrollOption = reactive({
  imgList: []
})

const time: any = ref(null)
const patList: any = ref([]) //患者列表
const keyWord: any = ref('') //关键字
const warnData = reactive({
  heartWarn: [], //心率警告列表
  spO2Warn: [], //血氧浓度警告列表
  breathWarn: [] //呼吸率警告列表
})
const warnArr = ref([]) //处理预警数组
const patIdx = ref(0)

const {heartWarn, spO2Warn, breathWarn} = toRefs(warnData)
const popoverIdx = ref(5)

/** 查询患者列表 */
const getList = () => {
  getPat(keyWord.value).then((res: any) => {
    patList.value = res.data
    if (patList.value.length > 0) {
      useLsd.setPatActive(patList.value[patIdx.value]) //默认第一个
      getPatSignData(patList.value[patIdx.value].visitNoStr)
    }
  })
}

/** 查询预警列表 */
const getWarnList = () => {
  getWarn().then((res: any) => {
    let {
      heartWarn: heartWarnRes,
      spO2Warn: spO2WarnRes,
      breathWarn: breathWarnRes
    } = res.data
    heartWarn.value = heartWarnRes
    spO2Warn.value = spO2WarnRes
    breathWarn.value = breathWarnRes

    imgList[0].value = heartWarnRes?.length || 0
    imgList[1].value = spO2WarnRes?.length || 0
    imgList[2].value = breathWarnRes?.length || 0
  })
}

//预警样式
const styleOptine = reactive([
  ['hr_active.png', 'hr', '心率预警', 'hr_zs.png', 'purple_close', '#722ED1'],
  ['sa_active.png', 'hr', '血氧预警', 'sa_zs.png', 'pink_close', '#F5319D'],
  ['resp_active.png', 'hr', '呼吸预警', 'resp_zs.png', 'green_close', '#00B42A'],
  ['lsd_top_left', 'hr', '呼吸预警', 'hr_zs.png', 'purple_close', '#722ED1']
])

const imgList = reactive([
  {
    url: 'avgHr.png',
    text: '心率预警(条)',
    value: '0'
  },
  {
    url: 'avgSaO2.png',
    text: '血氧预警(条)',
    value: '0'
  },
  {
    url: 'resp.png',
    text: '呼吸预警(条)',
    value: '0'
  }
])

const rowClass = reactive({
  background: 'rgba(255, 255, 255, 0.1)',
  color: 'rgba(255, 255, 255, 0.7)'
})

//改变预警背景
const handleBg = (e: any, idx: number) => {
  if (popoverIdx.value == idx) {
    popoverIdx.value = 5
  } else {
    popoverIdx.value = idx
  }
}

/** 就诊号查询患者体征数据 */
const getPatSignData = (patientIdStr: string) => {
  getPatSign(patientIdStr).then((res: any) => {
    useLsd.setPatData(res.data)
  })
}

//点击预警表格
const Rowclick = (e) => {
  keyWord.value = e.visitNoStr
  getList()
}

//定时刷新预警
time.value = setInterval(() => {
  getWarnList()
  getList()
}, 15000)

const handleSelectionChange = (selection: any) => {
  selection.forEach((val) => {
    let data = {
      warnId: val.id, //预警id
      warnType: val.warnType, //预警类型
      handleWay: 1 //
    }
    warnArr.value.push(data)
  })

  const handleWarning = (type: 1 | 2) => {
    if (warnArr.value.length <= 0) {
      ElMessage.error('请勾选需处理患者！')
      return
    }
    warnArr.value.forEach((val: any) => {
      val.handleWay = type
    })
    handleWarn(warnArr.value).then(() => {
      ElMessage.success('处理成功！')
      getWarnList()
    })
  }

  //页面销毁关闭定时器
  onBeforeUnmount(() => {
    clearInterval(time.value)
    time.value = null
    console.log('页面注销了')
  })
}
getList()
getWarnList()

</script>

<style scoped lang="less">
.right {
  width: 621px;

  .left_top {
    position: relative;

    .left_top_item {
      width: 141px;
      height: 96px;
      background-size: cover;
      background-position: center center;
      color: #dfdfdf;
      cursor: pointer;
    }

    .popover {
      width: 100%;
      height: 647px;
      position: absolute;
      left: 0;
      top: 106px;
      background-image: url(@/assets/imgs/popover_bg.png);
      background-size: cover;
      background-position: center center;
      z-index: 999;
      transition: 0.3s;

      .popover_item {
        width: 100%;
        height: 50px;

        .popover_zs {
          width: 250px;
          height: 22px;
        }
      }

      .btn {
        position: absolute;
        right: 0px;
        bottom: 18px;

        .btn_item {
          width: 88px;
          line-height: 32px;
          border-radius: 2px;
          color: #fff;
          background: rgba(255, 255, 255, 0.16);
          text-align: center;
          display: inline-block;
          margin-right: 17px;
        }
      }
    }
  }
}
</style>
